<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 40%;
            height: 300px;
            background-color: pink;
            /* 在弹性盒对象的 <div> 元素中的各项周围留有空白 */
            justify-content: space-around;
        }

        div span{
            height: 100px;
            background-color: purple;
            margin: 10px;
            /* 让子盒子均匀分布 */
            flex: 1;
        }
    </style>
</head>

<body>
    <!-- flex: flexible Box 缩写， 意为弹性布局，用来以盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
        1.当为父盒子设定为flex布局时，子元素的float、clear和vertical-align属性失效
        2.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex 
    -->

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>